<template>
  <div><f-button @click="toJSON">to json</f-button> <f-button @click="toXML">to xml</f-button></div>
  <div class="flex flex-row">
    <f-lang-editor
      style="width: 50%; height: calc(100vh - 100px)"
      class="flex1"
      v-model:value="code"
      :lang="'xml'"></f-lang-editor>
    <f-lang-editor
      style="width: 50%; height: calc(100vh - 100px)"
      class="flex1"
      v-model:value="json"
      :lang="'json'"></f-lang-editor>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { xml2json, json2xml } from 'fok-js';

const code = ref('<application>\n\n</application>');
const json = ref('');
function toJSON() {
  const v = xml2json(code.value);
  if (typeof v !== 'undefined') json.value = JSON.stringify(v, null, 2);
}
function toXML() {
  const v = json2xml(JSON.parse(json.value));
  if (v) {
    code.value = v;
  }
}
</script>
